<!--
* @FileDescription: 查询历史弹框组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-30 12:27:43
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:27:43
-->
<template>
    <div class="searBox">
        <h2>近{{searList.length}}条历史</h2>
        <div v-if="searList.length>0" class="searListBox">
            <Waterfall :list="searList" class="pets" :breakpoints="state.breakpoints" :key="searList">
                <template #default="{ item, url, index }">
                    <div class="listBox">
                        <div class="dateBox">
                            <span>
                                <svg-icon @click="checkedChange(index)" v-if="state.pointIdvalue==index"
                                    icon-class="wancheng" style="margin-right: 10px;width: 16px;height: 16px;" />
                                <span @click="checkedChange(index)" v-else class="selectBox"></span>
                                <span>{{ item.saveTime }}</span></span>
                            <span>
                                <svg-icon icon-class="shanchu" class="hover" @click="clearSaveClick(item)" /></span>
                        </div>
                        <div class="listData">
                            <p v-for="(itemsub,index) in item.pointIds">
                                <span
                                    class="num">{{ index+1<10?'0'+(index+1):(index+1) }}</span><span>{{ itemsub.pointId }}/{{ itemsub.sensorName }}</span>
                            </p>
                        </div>
                    </div>
                </template>
            </Waterfall>
        </div>
        <div v-else style="text-align: center;">
            <span class="nodataClass">
              <img src="@/assets/images/空白.png">
              <p>暂无查询历史</p>
            </span>
        </div>
        <div class="formLabel" style="margin-top: 10px;">
            <span>时间范围</span>
            <el-date-picker v-model="state.datetimerange" type="datetimerange" range-separator="-"
                start-placeholder="开始时间" end-placeholder="结束时间" />
        </div>
        <div class="form_footer" style="display: flex;
        justify-content: space-between;margin-top: 20px;
        position: static;">
            <span>
                <el-button type="danger" plain @click="clearSaveClick">清除全部</el-button>
            </span>
            <span>
                <el-button type="info" @click="searcancelClick">取消</el-button>
                <el-button type="primary" @click="searsubmitClick">确定</el-button>
            </span>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import {
        LazyImg,
        Waterfall
    } from "vue-waterfall-plugin-next";
    import "vue-waterfall-plugin-next/dist/style.css";
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    import dayjs from 'dayjs';
    const {
        proxy
    } = getCurrentInstance();
    const calendar = ref(null)
    const userStore = useUserStore();
    const emits = defineEmits([''])
    const props = defineProps({
        searList: {
            type: Array,
            default: () => {
                return []
            }
        },
        tempShow: {
            type: Boolean,
            default: () => {
                return false
            }
        }
    })
    // 重点
    const state = reactive({
        searListShow: false,
        datetimerange: undefined,
        addModal: false,
        templateName: undefined,
        checked: false,
        pointIdvalue: undefined,
        breakpoints: {
            800: { //当屏幕宽度小于等于800
                rowPerView: 2,
            },
            500: { //当屏幕宽度小于等于500
                rowPerView: 2,
            }
        },
    })


    function checkedChange(item) {
        state.pointIdvalue = item
    }
    function clearSaveClick(id){
        let ids=[]
        if(id.id){
            ids=[id.id]
        }else{
            ids= []
        }
        emits('clearSaveClick',ids)
    }
    function searsubmitClick(){
        emits('searsubmitClick',{data:props.searList[state.pointIdvalue],rangetime:state.datetimerange})
    }
    function searcancelClick(){
        emits('searcancelClick',false)
    }
    watchEffect(() => {
        state.addModal = props.tempShow
    })
</script>
<style lang="scss" scoped>
    .selectBox {
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 231, 235, 1);
        margin-right: 10px;
        cursor: pointer;
    }

    .searBox {
        min-width: 648px;
        max-width: 648px;
        border: 1px solid rgba(68, 136, 255, 0.1);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0px 2px 20px rgba(91, 109, 128, 0.2);
        backdrop-filter: blur(20px);
        color: rgba(62, 70, 79, 1);
        padding: 16px;

        h2 {
            font-size: 16px;
            font-weight: 700;
        }

        .searListBox {
            height: 200px;
            overflow-y: auto;
        }

        .listBox {
            border-radius: 4px;
            background: rgba(68, 136, 255, 0.08);
            border: 1px solid rgba(68, 136, 255, 0.4);
            padding: 16px;


            .dateBox {
                display: flex;
                justify-content: space-between;
                align-items: center;

                span {
                    display: flex;
                    align-items: center;
                    white-space: nowrap;
                    // &:nth-child(1){
                    // margin-right: 30px;
                    // }
                }
            }

            .listData {
                margin-top: 12px;
                background: rgba(255, 255, 255, 0.6);
                padding: 10px 12px 10px 12px;
                border-radius: 4px;

                p {
                    padding: 4px 0;
                    margin: 0;

                    .num {
                        margin-right: 16px;
                        color: rgba(62, 70, 79, 0.6);
                    }
                }
            }
        }
    }
</style>